<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>用户注册</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style>
			/* input,.btn{margin-top: 20px;} */
			.code{width: 110px;height: 38px;border: 0px solid black;position:absolute;right:0;  margin-top: -42px;margin-right: 10px;}
			a{color: black;}
			.content-middle-body > input, .content-middle-body > button, .content-middle-body > a {
				margin-top:6px;
				margin-bottom: 6px;
			}		
			#tryplay {
				display:none;
			}	
			#tryplay.active {
				display: inline-block;
			}
		</style>
	</head>
	<body style="">
		<div class="bg-theme text-center top col-xs-12 col-sm-4 col-sm-offset-4">
			<span>用户注册</span>
			<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="color: white;position:absolute;top: 50%;transform:translateY(-50%);left:10px;"></a>
		</div>
		<div class="text-center content-middle-body col-xs-12 col-sm-4 col-sm-offset-4" style="margin-top:40px;">
			<!-- 正文开始 -->
			<input id="name" type="text" placeholder="用户名(4-10位)" maxlength="10" class="form-control input-lg" style="margin-top:25px;"></input>
			<input id="pass1" type="password" placeholder="密码(6-16位字母、数字)" maxlength="16" class="form-control input-lg" ></input>
			<input id="pass2" type="password" placeholder="再次输入密码" maxlength="16" class="form-control input-lg" ></input>
			<input id="icode" type="text" placeholder="邀请码[可不填写]"  maxlength="10" class="form-control input-lg" value=""></input> 
			<input id="qq" type="text" placeholder="QQ号码[重要!只能输入数字]" maxlength="16" oninput="value=value.replace(/[^\d]/g,'')"  class="form-control input-lg" ></input>
			<input id="telephone" type="text" placeholder="手机号码[重要 !只能输入数字]" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" class="form-control input-lg" ></input>
			<div style="position: relative;">
				<input id="code" type="text" placeholder="验证码!只能输入数字" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')" class="form-control input-lg" ></input>
				<img src="/u/code.do" class="code" />
			</div>
			<span id="notice" style="width:100%;color: red;border: 0;height: 30px;display: block;font-size: 16px;text-align: left;"></span>
			<input type="checkbox" class="bg-danger" checked="checked" /> 我已阅读《<a href="" class="text-danger">用户购彩服务协议</a>》
			<button id="register" class="btn btn-lg disabled pm bg-theme">立即注册</button>
			<a href="login.jsp" class="btn btn-lg pm bg-theme">立即登录</a>
			<button id="tryplay" class="btn btn-lg pm bg-theme">免费试玩</button>
			<!-- 正文结束 -->
		</div>
	 	<div class="text-center foot col-xs-12 col-sm-4 col-sm-offset-4" style="border-top:none;">
			<iframe src="f.jsp"></iframe>
		</div>
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>			
	</body>
	<script>
	var accountReg = /^[a-zA-Z0-9_-]{4,10}$/
	setContentBodyHeight()
	fixHeadAndFoot()
		$(function(){
			var nameOk=false;
			$("#name").blur(function(){
				ajax({
					url:'/u/checkUser.do',
					data:{name:$("#name").val()},
					type:'get',
					success:function(data){
						var json=eval('('+data+')');
						if(json.data==0){
							nameOk=true;
							$("#notice").text(isNull());
						}else{
							nameOk=false;
							$("#notice").text("该用户名已经存在");
						}
					}
				});
			});
			$("#tryplay").click(function(){
				var name=prompt("请输入你要试玩的用户名","请牢记，密码123456");
				if(name=='')showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "用户名不能为空！")
				else if(name==null) ;
				else{
					ajax({
						url:'/u/checkUser.do',
						data:{name:name},
						type:'post',
						success:function(data){
							var json=eval('('+data+')');
							if(json.data!=0){
								showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "该用户名已经存在")
							}else{
								ajax({
									url:'/u/tryplay.do',
									data:{name:name},
									type:'post',
									success:function(data){
										var json=eval('('+data+')');
										if(json.message==1){
											window.location.href="/sy.do";
										}
									}
								});
							}
						}
					});
				}
			});			
			$("input").bind('input propertychange', function() {
				if(nameOk){
					$("#notice").text(isNull());
				}
			});
			
			$("#register").click(function(){
				var phone=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				var qqReg = /^[1-9]\d{4,10}$/
				if (!$("#name").val() || !$("#pass1").val() || !$("#pass2").val() || !$("#qq").val() || !$("#code").val()) {
					showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "请填写完整信息")
					return
				}
				if ($("#telephone").val().trim() != "" && !phone.test($("#telephone").val())) {
					showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "请输入正确的手机号")
					return					
				}
				if (!qqReg.test($("#qq").val())) {
					showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "请输入正确的QQ号")
					return						
				}
				if(isNull()==""&&nameOk){
					ajax({
						url:'/u/register.do',
						data:{name:$("#name").val(),pass:$("#pass1").val(),qq:$("#qq").val(),code:$("#code").val(), telephone: $("#telephone").val(),icode: $("#icode").val()},
						type:'post',
						success:function(data){
							var json=eval('('+data+')');
							if(json.data){
								showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "注册成功，页面将立即自动登录")
								setTimeout(function() {
									window.location.href="/u/bank.do";
								}, 1000)
							}else{
								showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "注册失败，"+json.message)
							}
						}
					});
				}else{
					showNormalNoticeModal("#div-i-noticeGenDan", "提示：", $("#notice").text())
				}
				
			});
			$(".code").click(function(){
				$(".code").attr("src","/u/code.do?"+Math.random());
			});
		});
		
		function isNull(){
			if($("#name").val()==""||$("#name").val()==null) return "用户名不能为空";
			else if(!accountReg.test($("#name").val())) return "账号必须是4到10位(字母，数字，下划线，减号)";
			else if($("#pass1").val()==""||$("#pass1").val()==null) return "密码不能为空";
			else if ($("#pass1").val().length<6||$("#pass1").val().length>16) return "密码不能小于6位或大于16位";
			else if($("#pass1").val()!=$("#pass2").val()) return "两次密码输入不一致";
			else if($("#code").val()==""||$("#code").val()==null) return "验证码不能为空";
			else return "";
		}
		
		stopUserScaleScreenIOS()
	</script>
</html>